<div class="row" *ngIf="!isLoading">
    <div class="col-8 offset-2">
        <div class="row application-detail-header">
            <div class="col-4">
                <nb-card>
                    <img
                        class="application-icon"
                        [src]="
                            application?.icon ||
                            'assets/icon/icon-placeholder.png'
                        "
                        alt="{{ application?.name }} icon"
                    />
                </nb-card>
            </div>
            <div class="col-8">
                <p class="subtitle package-type">
                    {{ 'GENERAL.' + application?.packageType | translate }}
                </p>
                <h1>{{ application?.name }}</h1>
                <span class="version">{{ application?.version }}</span>
                <p>{{ application?.summary }}</p>

                <app-install-button
                    [applicationStatus]="applicationStatus"
                    [isIndefinite]="isIndefinite"
                    [installationPercentage]="installationPercentage"
                    (installClicked)="install(application)"
                    (uninstallClicked)="uninstall(application)"
                    [packageType]="application?.packageType"
                ></app-install-button>
            </div>
        </div>

        <app-gallery [images]="application?.screenshots"></app-gallery>
    </div>
</div>

<div class="row" *ngIf="!isLoading">
    <div class="col-8">
        <nb-card>
            <nb-card-body
                [innerHTML]="application?.description | markdown"
            ></nb-card-body>
        </nb-card>
    </div>
    <div class="col-4">
        <nb-card>
            <nb-card-body>
                <button
                    nbButton
                    ghost
                    *ngIf="application?.homepage"
                    (click)="openUrl(application?.homepage)"
                >
                    <nb-icon icon="globe-outline"></nb-icon>
                    {{ 'PAGES.APP_DETAIL.PROJECT_HOMEPAGE' | translate }}
                </button>

                <button
                    nbButton
                    ghost
                    *ngIf="application?.bugtrackerUrl"
                    (click)="openUrl(application?.bugtrackerUrl)"
                >
                    <nb-icon icon="github-outline"></nb-icon>
                    {{ 'PAGES.APP_DETAIL.REPORT_ISSUE' | translate }}
                </button>

                <button
                    nbButton
                    ghost
                    *ngIf="application?.donationUrl"
                    (click)="openUrl(application?.donationUrl)"
                >
                    <nb-icon icon="heart-outline"></nb-icon>
                    {{ 'PAGES.APP_DETAIL.DONATE' | translate }}
                </button>

                <button nbButton ghost (click)="openStorePage()">
                    <nb-icon icon="shopping-bag-outline"></nb-icon>
                    {{ 'PAGES.APP_DETAIL.STORE_PAGE' | translate }}
                </button>

                <div *ngIf="application?.developer">
                    <p class="detail-title">Developed by</p>
                    {{ application?.developer }}
                </div>

                <div *ngIf="application?.license">
                    <p class="detail-title">License</p>
                    {{ application?.license }}
                </div>

                <div *ngIf="application?.lastReleaseDate">
                    <p class="detail-title">Last update</p>
                    {{ application?.lastReleaseDate | date }}
                </div>
            </nb-card-body>
        </nb-card>
    </div>
</div>

<div
    *ngIf="isLoading"
    [nbSpinner]="true"
    nbSpinnerSize="giant"
    class="loading-indicator"
></div>
